<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>导航</title>
  <!--link-->
  <link rel="stylesheet" href="../../lib/icon/fontawesome-free-6.4.0/all.css">
  <link rel="stylesheet" href="../../lib/bootstrap-5.1.3-dist/css/bootstrap.css">
  <link rel="stylesheet" href="../../lib/weui/weui.css">
  <link rel="stylesheet" href="../mycss.css">
  <link rel="stylesheet" href="../../lib/mui/dist/css/mui.min.css">
  <script src="../../lib/jquery/jquery-3.6.1.js"></script>
  <script src="../../lib/axios/axios.js"></script>
  <script src="../../util/httpRequest.js"></script>
  <script src="../../util/myutil.js"></script>
  <script src="../../lib/vue/vue.js"></script>
  <script src="../../lib/mui/dist/js/mui.min.js"></script>
</head>
<body data-weui-theme="light">
<div class="weui-tab" id="root">
  <div id="panel1" role="tabpanel" aria-labelledby="tab1" class="weui-tab__panel">
    <!--图片轮播-->
    <div class="mui-content">
      <div class="mui-slider">
        <div class="mui-slider-group mui-slider-loop">
          <!--支持循环，需要重复图片节点-->
          <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../../img/AC0A3570.jpg" /></a></div>
          <div class="mui-slider-item"><a href="#"><img src="../../img/7L2A8801.jpg" alt=""></a></div>
          <div class="mui-slider-item"><a href="#"><img src="../../img/33.jpg" alt=""></a></div>
          <div class="mui-slider-item"><a href="#"><img src="../../img/02213.jpg" alt=""></a></div>
          <div class="mui-slider-item"><a href="#"><img src="../../img/AC0A3570.jpg" alt=""></a></div>
          <!--支持循环，需要重复图片节点-->
          <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../../img/7L2A8801.jpg" /></a></div>
        </div>
      </div>
    </div>
    <!--region 查询服务块-->
    <div class="weui-cells__title">信息查询</div>
    <div class="weui-grids">
      <a href="../spm/stu-termspmlist.html" class="weui-grid" role="button">
        <div class="weui-grid__icon">
          <i class="fa-solid fa-user-graduate fa-xl"></i>
        </div>
        <p class="weui-grid__label">学业状况</p>
      </a>
      <a @click="getSpmCurrTermRpt" class="weui-grid" role="button">
        <div class="weui-grid__icon">
          <i class="fa-solid fa-scroll fa-xl"></i>
        </div>
        <p class="weui-grid__label">质量报告</p>
      </a>
      <a href="../spm/stu-spmscorelist.html" class="weui-grid" role="button">
        <div class="weui-grid__icon">
          <i class="fa-solid fa-chart-simple fa-xl"></i>
        </div>
        <p class="weui-grid__label">学生成绩</p>
      </a>
      <a href="../subscript-msg/template-newmsg.html" class="weui-grid" role="button">
        <div class="weui-grid__icon">
          <i class="fa-regular fa-comment fa-xl"></i>
        </div>
        <p class="weui-grid__label">消息通知 <span id="b1_n1" v-if="unreadMsgCount > 0" class="weui-badge" aria-label="，个新通知">{{unreadMsgCount}}</span></p>
      </a>
      <a @click="getStudentAbltShow" class="weui-grid" role="button">
        <div class="weui-grid__icon">
          <i class="fa-solid fa-book-open-reader fa-xl"></i>
        </div>
        <p class="weui-grid__label">专业能力</p>
      </a>
    </div>
    <!--endregion-->
    <!--region 其他服务块-->
    <div class="weui-cells__title">其他服务</div>
    <div class="weui-grids">
      <!--<a href="../subscript-msg/subscript-msg.html" class="weui-grid" role="button">
        <div class="weui-grid__icon">
          <i class="fa-solid fa-rss fa-xl"></i>
        </div>
        <p class="weui-grid__label">通知/提醒订阅</p>
      </a>-->
    </div>
    <!--endregion-->
  </div>
  <!-- 我的信息活动页 -->
  <div id="panel2" role="tabpanel" aria-labelledby="tab2" class="weui-tab__panel" style="display: none;">
    <!--个人信息展示-->
    <div id="personInfo">
      <div class="weui-msg__custom-area">
        <img v-if="studentinfo.photopath" :src="studentinfo.photopath" class="img-thumbnail rounded mx-auto d-block" alt="用户身份照">
        <ul class="weui-form-preview__list">
          <li v-if="studentinfo.studentno" role="option" class="weui-form-preview__item"><label class="weui-form-preview__label">学号</label><p class="weui-form-preview__value">{{studentinfo.studentno}}</p></li>
          <li v-if="studentinfo.studentname" role="option" class="weui-form-preview__item"><label class="weui-form-preview__label">姓名</label><p class="weui-form-preview__value">{{studentinfo.studentname}}</p></li>
          <li v-if="studentinfo.sexname" role="option" class="weui-form-preview__item"><label class="weui-form-preview__label">性别</label><p class="weui-form-preview__value">{{studentinfo.sexname}}</p></li>
          <li v-if="studentinfo.folkname" role="option" class="weui-form-preview__item"><label class="weui-form-preview__label">民族</label><p class="weui-form-preview__value">{{studentinfo.folkname}}</p></li>
          <li v-if="studentinfo.gradeno" role="option" class="weui-form-preview__item"><label class="weui-form-preview__label">学级</label><p class="weui-form-preview__value">{{studentinfo.gradeno}}</p></li>
          <li v-if="studentinfo.departmentname" role="option" class="weui-form-preview__item"><label class="weui-form-preview__label">学院</label><p class="weui-form-preview__value">{{studentinfo.departmentname}}</p></li>
          <li v-if="studentinfo.specialityname" role="option" class="weui-form-preview__item"><label class="weui-form-preview__label">系</label><p class="weui-form-preview__value">{{studentinfo.specialityname}}</p></li>
          <li v-if="studentinfo.classname" role="option" class="weui-form-preview__item"><label class="weui-form-preview__label">班级</label><p class="weui-form-preview__value">{{studentinfo.classname}}</p></li>
        </ul>
      </div>
    </div>
    <div class="page__bd page__bd_spacing">
      <a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showIOSActionSheet">解绑微信</a>
    </div>
    <!--BEGIN actionSheet 重复确认解绑-->
    <div>
      <div class="weui-mask" id="iosMask" style="display: none;"></div>
      <div role="dialog" aria-modal="true" tabindex="0" aria-hidden="true" class="weui-actionsheet" id="iosActionsheet">
        <div class="weui-actionsheet__title">
          <p class="weui-actionsheet__title-text">是否解绑</p>
        </div>
        <div class="weui-actionsheet__menu">
          <div id="unbind" role="button" tabindex="0" class="weui-actionsheet__cell weui-actionsheet__cell_warn">确认解绑</div>
        </div>
        <div class="weui-actionsheet__action">
          <div role="button" tabindex="0" class="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div>
        </div>
      </div>
    </div>
    <!--END actionSheet-->
  </div>
  <!--底栏-->
  <div role="tablist" aria-label="选项卡标题" class="weui-tabbar">
    <div id="tab1" role="tab" aria-labelledby="t1_title" aria-describedby="t1_tips" aria-selected="true" aria-controls="panel1" class="weui-tabbar__item weui-bar__item_on">
      <div id="t1_tips" aria-hidden="true" style="display: inline-block; position: relative;">
        <div class="weui-tabbar__icon">
          <i class="fa-solid fa-grip-vertical fa-xl"></i>
        </div>
        <!--<span class="weui-badge" style="position: absolute; top: -2px; right: -13px;">8</span>-->
      </div>
      <p id="t1_title" aria-hidden="true" class="weui-tabbar__label">功能列表</p>
    </div>
    <div id="tab2" role="tab" aria-labelledby="t2_title" aria-selected="false" aria-controls="panel2" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <i class="fa-solid fa-user fa-xl"></i>
      </div>
      <p aria-hidden="true" id="t2_title" class="weui-tabbar__label">我的信息</p>
    </div>
  </div>
</div>
<!--</div>-->
<script type="text/javascript">
  const vm = new Vue({
    el:'#root',
    data:{
      unreadMsgCount:0,
      studentinfo:{
        studentno:'',
        studentname:'',
        sexname:'',
        folkname:'',
        gradeno:'',
        departmentname:'',
        specialityname:'',
        classname:'',
        photopath:''
      }
    },
    methods: {
      verificationObj(key) {
        return verification(key)
      },
      getSpmCurrTermRpt(){
        http({
          url:'/third/thirdHTML/getSpmCurrTermRpt',
          method: 'get'
        }).then(response => {
          if (response.data.code === '200' ){
            location.href = response.data.url
          }
        })
      },
      getStudentAbltShow(){
        http({
          url:'/third/thirdHTML/getStudentAbltShow',
          method: 'get'
        }).then(response => {
          if (response.data.code === '200' ){
            location.href = response.data.url
          }
        })
      }
    },
    mounted(){
      http({
        url:'/third/templateMsg/getUnreadMsgCount',
        method: 'get'
      }).then(response => {
        console.log(response.data.unreadMsgCount)
        if (response.data.code === '200' ){
          this.unreadMsgCount = response.data.unreadMsgCount
        }
      })
      
      http({
        url:'/third/thirdUser/userDetailInfo',
        method: 'get'
      }).then(response => {
        console.log(response.data)
        if (response.data.code === '200' ){
          this.studentinfo = response.data.studentinfo
        }
      })
    }
  })
</script>
<!--页面效果JS-->
<script type="text/javascript">
  $(function(){
    $('.weui-tabbar__item').on('click', function () {
      $(this).attr('aria-selected','true').addClass('weui-bar__item_on');
      $(this).siblings('.weui-bar__item_on').removeClass('weui-bar__item_on').attr('aria-selected','false');
      var panelId = '#' + $(this).attr('aria-controls');
      $(panelId).css('display','block');
      $(panelId).siblings('.weui-tab__panel').css('display','none');
    });
  });
  
  //解绑活动页
  $(function(){
    var $iosActionsheet = $('#iosActionsheet');
    var $iosMask = $('#iosMask');
    
    function hideActionSheet() {
      $iosActionsheet.removeClass('weui-actionsheet_toggle').attr('aria-hidden','true');
      $iosMask.fadeOut(200);
      $('#showIOSActionSheet').trigger('focus');
    }
    
    $iosMask.on('click', hideActionSheet);
    $('#iosActionsheetCancel').on('click', hideActionSheet);
    $("#showIOSActionSheet").on("click", function(){
      $iosActionsheet.attr('aria-hidden','false').addClass('weui-actionsheet_toggle');
      $iosMask.fadeIn(200);
      setTimeout(function(){
        $('#current1').trigger('focus');
      },200)
    });
    
    $('#unbind').on('click', function(){
      http({
        url:'/third/thirdUser/unbind',
        method: 'delete'
      }).then(response => {
        console.log(response)
        if (response.data.code === '200' ){
          location.href = baseURL + '/web/index/index.html'
        }
      })
    })
  })
  
  var gallery = mui('.mui-slider');
  gallery.slider({
    interval:2000//自动轮播周期，若为0则不自动播放，默认为0；
  });
</script>
</body>
<style>
  img{
    width:10rem;
    object-fit: scale-down;
  }
</style>
</html>